import React, { useRef } from "react";
import { RectButton } from "react-native-gesture-handler";
import { Animated, Text, StyleSheet, View } from "react-native";
import { SharedValue, useAnimatedStyle } from "react-native-reanimated";
import RowButton from "@/components/CustomButton/RowButton";
import { Stack } from "expo-router";
import { useTheme } from "@/contexts/ThemeContext";
import { getHeaderStyle } from "@/styles/header.style";
import AlertService from "@/components/Global/Alert/service";
import {NestableDraggableFlatList, NestableScrollContainer} from "react-native-draggable-flatlist";
import {Header} from "@rneui/base";

export default function SecurityNotificationsSettings() {
  // 获取当前主题模式
  const { themeMode } = useTheme();
  // 获取基于当前主题的header样式
  const headerStyles = getHeaderStyle(themeMode);

  const swipeableRef = useRef(null);

  const close = () => {
    if (swipeableRef.current) {
      swipeableRef.current.close();
    }
  };

  const renderRightActions = (
    progress: SharedValue<number>,
    dragX: SharedValue<number>
  ) => {
    const animatedStyle = useAnimatedStyle(() => {
      return {
        transform: [{ translateX: dragX.value + 50 }],
      };
    });

    return (
      <Animated.View style={[styles.rightActionContainer, animatedStyle]}>
        <RectButton style={styles.rightAction} onPress={close}>
          <Text style={styles.actionText}>Archer</Text>
        </RectButton>
      </Animated.View>
    );
  };

  return (
    <>
      <Stack.Screen
        options={{
          title: "安全通知",
          headerTitleAlign: headerStyles.headerTitleAlign as "left" | "center",
          headerStyle: headerStyles.headerStyle,
          headerTintColor: headerStyles.headerTintColor,
          headerTitleStyle: headerStyles.headerTitleStyle,
        }}
      />
      <View style={{ flex: 1 }}>

      </View>
    </>
  );
}

const styles = StyleSheet.create({
  rightActionContainer: {
    justifyContent: "center",
    alignItems: "flex-end", // 靠右显示
  },
  rightAction: {
    backgroundColor: "#faca0b",
    justifyContent: "center",
    alignItems: "center",
    flex: 1,
    paddingHorizontal: 24,
    height: "100%",
  },
  actionText: {
    color: "white",
    fontSize: 16,
  },
});
